<template>
  <div class="video">
    <header class='clearFixed'>
      <i class="el-icon-video-camera-solid"></i>视频中心
      <span class="fr">+更多</span>
      <ul class="nav">
        <li v-for='(item,index) in navlist' :key='index' :class="{liactive:thisone==index}" @mouseenter="thisone=index" @mouseover="thislist">{{item}}</li>
      </ul>
    </header>
    <div class="video_con">
      <div class="video_list">
        <a href="" class="video-item" v-for="(item2,index) in videolist" :key="index" @mouseenter="thisvideo(index)" @mouseleave="thisvideono">
          <div class="video_img">
            <img :src="item2.img" alt="">
            <div class="video-mask" :class="{displaythis:videoindex==index}">
              <img src="//game.gtimg.cn/images/yxzj/match/center2018/images/bigwatch.png" alt="" class="video-mask-img" width="40">
            </div>
            <div class="video-introduce">
              <div class="watch-number fl">
                <i class="el-icon-video-play"></i>{{item2.watchnum}}
              </div>
              <div class="video-date fr">
                {{item2.date}}
              </div>
            </div>
          </div>
          <div class="video-title">
            {{item2.title}}
          </div>
        </a>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data: () => ({
    activeName: 'all',
    thisone: 0,
    videoindex: null,
    videolist: [],
    navlist: ['全部', '比赛视频', '观赛指南', '王者炸麦了', '荣耀大话王', '大葱哥聊KPL', '最佳操作']
  }),
  created () {
    this.getvideo()
  },
  methods: {
    async getvideo () {
      const { data } = await this.$axios.get('/match/videodata')
      this.videolist = data.videodata[this.thisone].list
    },
    thislist () {
      this.getvideo(this.thisone)
    },
    thisvideo (one) {
      this.videoindex = one
    },
    thisvideono () {
      this.videoindex = null
    }
  }
}
</script>
<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
a{
  text-decoration: none;
  color: #000;
}
.video{
  margin-top: 40px;
  width: 1200px;
  header{
    position: relative;
    height: 40px;
    font-size: 22px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    span{
      font-size: 16px;
      columns: #c0c0c0;
      line-height: 42px;
    }
    .nav{
      position: absolute;
      left: 150px;
      top: 2px;
      width: 730px;
      display: flex;
      justify-content: space-between;
      li{
        font-size: 16px;
        line-height: 38px;
        list-style: none;
      }
      .liactive{
        color: gold;
        border-bottom: 2px solid gold;
      }
    }
  }
  .video_head{
    p{
      border-bottom: 2px solid #ddd;
      font-size: 20px;
      padding-bottom: 10px;
      padding-right: 20px;
      margin-top: 1px;
    }
    .video_nav{
      width: 1030px;
    }
    .more{
      display:block;
      width: 50px;
      line-height: 38px;
      border-bottom: 2px solid #ddd;
    }
  }
  .video_con{
    width: 1200px;
    overflow: hidden;
    .video_list{
      display:flex;
      flex-wrap: wrap;
      width: 1200px;
      justify-content: space-between;
      align-items: flex-end;
      a{
        width: 226px;
        height: 193px;
        box-sizing: border-box;
        .video_img{
          width: 226px;
          position: relative;
          height: 140px;
          img{
            width: 100%;
            height: 100%;
          }
          .video-introduce{
            box-sizing: border-box;
            padding: 0 10px;
            position: absolute;
            width: 100%;
            background: #000;
            opacity: .8;
            bottom: 0;
            height: 25px;
            color: #fff;
            }
            .video-mask {
            display: none;
            position: absolute;
            width: 100%;
            background:#000;
            opacity: 0.8;
            top: 0;
            left: 0;
            height: 100%;
            .video-mask-img {
              display: block;
              width: 40px;
              height: 40px;
              margin: 50px auto;
            }
          }
          .displaythis{
            display: block;
          }
          .displaythisno{
            display: none;
          }
        }
        .video-title{
          width: 100%;
          // white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 40px;
        }
      }
    }
  }
}
</style>
